<template>
  <v-app id="app">
    <!-- 内容 -->
    <v-main>
      <router-view :key="$route.fullPath"/>
    </v-main>
    <!--  回到顶部  -->
    <BackTop></BackTop>
    <!--  头部导航栏  -->
    <HeadNav></HeadNav>
    <!--  页脚  -->
    <Footer></Footer>
  </v-app>
</template>

<script>
import BackTop from "@/components/BackTop";
import HeadNav from "@/components/HeadNav";
import Footer from "@/components/Footer";

export default {
  name: 'App',
  data: () => ({
    users: ""
  }),
  components: {
    BackTop,
    HeadNav,
    Footer
  },
  computed: {
    user() {
      return this.$store.state.user
    }
  }
};
</script>

<style scoped>
#app {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  background-image: linear-gradient(-225deg,
  rgba(44, 216, 213, 0.3) 0%,
  rgba(197, 193, 255, 0.3) 16%,
  rgba(255, 186, 195, 0.3) 30%,
  rgba(172, 182, 229, 0.3) 50%,
  rgba(229, 206, 172, 0.3) 70%,
  rgba(134, 253, 232, 0.3) 100%);
  animation:bgposition ease-in-out 5s infinite alternate;
  background-size: 200% 100%;
}

@keyframes bgposition {
  0% {
    background-size: 100% 100%;
  }
  100% {
    background-size: 200% 100%;
  }
}
</style>
